﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Signup</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/face.css">
   
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrapValidator.js"></script>

</head>
<body>
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    
    <!-- Navigation -->
   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                
                <a class="navbar-brand" href="#">Start Bootstrap</a>                
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">               
                <ul class="nav navbar-nav">                   
                    <li class="dropdown" id="dropdown-menu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                      <span id="show-id"></span>
                      <span class="caret"></span>
                      </a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">ข้อมูลส่วนตัว</a></li>
                        <li><a href="#">เปลี่ยนรหัสผ่าน</a></li>
                        <li><a href="#">ข้อมูลการจองสินค้า</a></li>
                        <li class="divider"></li>
                        <li><a href="#">ออกจากระบบ</a></li>
                      </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                  <div class="form-group">
                    <label class="sr-only" for="txt-user-id">User Id</label>
                    <input type="text" class="form-control" placeholder="อีเมลล์" id="txt-user-id" value="sukanya.manee@gmail.com">
                    <label class="sr-only" for="txt-password">Password</label>
                    <input type="password" class="form-control" placeholder="รหัผ่าน" id="txt-password" value="123456">
                  </div>
                  <button type="button" class="btn btn-default" id="btn-signin">เข้าสู่ระบบ</button>
                  <a class="navbar-link" href="#">สมัครสมาชิก</a>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <form id="signupForm" runat ="server" method="post" >
    <div class="container">
    <div class="col-xs-6">    
      <div class="form-group">        
        <label class="control-label" for="txt-email">อีเมล์</label>
        <input type="text" class="form-control" id="txt-form-email" placeholder="อีเมล์" name="txtEmail">
        <span id="email-error" class="help-block with-errors"></span>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group">
        <label class="control-label" for="txt-member-name">ชื่อ-นามสกุล</label>
        <input type="text" class="form-control" id="txt-member-name" placeholder="ชื่อ นามสกุล" name="txtName" >
      </div>
      <div class="form-group">
        <label class="control-label" for="txt-address">ที่อยู่</label>
        <textarea class="form-control" id="txt-address" placeholder="ที่อยู่" rows="4" name="txtAddress"></textarea> 
      </div>     
      <div class="row">
        <div class="col-xs-6 form-group">
          <label class="control-label" for="txt-telephone">เบอร์โทรศัพท์ติดต่อ</label>
          <input type="text" class="form-control" id="txt-telephone" placeholder="โทรศัพท์" name="txtTelephone" >          
        </div>
        <div class="col-xs-6 form-group">
          <label class="control-label" for="txt-post-code">รหัสไปรษณีย์</label>
          <input type="text" class="form-control" id="txt-post-code" placeholder="รหัสไปรษณีย์" name="txtPostCode" >          
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 form-group">       
          <label class="control-label" for="txt-password">รหัสผ่าน</label>
          <input type="password" class="form-control" id="txt-password-signup" placeholder="รหัสผ่าน" name="txtPassword" >        
        </div>
        <div class="col-xs-6 form-group">
      
          <label class="control-label" for="txt-confirm-password">ยืนยันรหัสผ่าน</label>       
          <input type="password" class="form-control" id="txt-confirm-password" placeholder="ยืนยันรหัสผ่าน" name="txtConfirm">
        </div>
      </div>
      <button type="submit" class="btn btn-primary" id="btn-signup-submit" >สมัครสมาชิก</button>
    </div>
    </div>
    </form>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript" src="js/Login.js"></script>
    

    <script type="text/javascript">
      var isUpdate = false;
      function loadData() {
        var mem = membersignup[0];
        $('#txt-form-email').val('mem.Email');
        $('#txt-form-email').prop('enabled','false');

        $('#txt-member-name').val('mem.Name');
        $('#txt-address').val('mem.Address');
        $('#txt-telephone').val('mem.Telephone');        
        $('#txt-post-code').val('mem.PostCode');
        $('#txt-password').val('mem.Password');
        $('#txt-confirm-password').val('mem.Password');

        isUpdate = true;
      }
        $(document).ready(function () {
          if (!membersignup) {
            loadData();
          }

            $('#signupForm')
                .bootstrapValidator({
                    //... options ...
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txtEmail: {
                            verbose: false,
                            validators: {
                                notEmpty: {
                                    message: 'กรุณาระบุอีเมล์'
                                },
                                emailAddress: {
                                    message: 'กรุณาระบุอีเมล์ให้ถูกต้อง'
                                },
                                remote: {
                                    url: 'WSRestFul.asmx/IsDuplicateEmail',
                                    data: function (validator) {
                                        return {
                                            txtEmail: validator.getFieldElements('txtEmail').val()
                                        };
                                    },
                                    message: 'อีเมล์นี้มีอยู่ในระบบแล้ว กรุณาสมัครด้วยอีเมล์อื่น',
                                    type: 'POST'
                                }
                            }
                        },
                        txtPostCode: {
                            message: 'รหัสไปรษณ๊ย์ไม่ถูกต้อง',
                            validators: {
                                notEmpty: {
                                    message: 'กรุณาระบุรหัสไปรษณีย์'
                                }
                            }
                        },
                        txtPassword: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณาระบุรหัสผ่าน'
                                },
                                identical: {
                                    field: 'txtConfirm',
                                    message: 'กรุณายืนยันรหัสผ่านให้ถูกต้อง'
                                },
                                stringLength: {
                                    min: 6,
                                    message: 'รหัสผ่านต้องไม่ต่ำกว่า 6 ตัวอักษร'
                                }
                            }
                        },
                        txtConfirm: {
                            message: 'กรุณายืนยันรหัสผ่าน',
                            validators: {
                                identical: {
                                    field: 'txtPassword',
                                    message: 'กรุณายืนยันรหัสผ่านให้ถูกต้อง'
                                },
                                notEmpty: {
                                    message: 'กรุณายืนยันรหัสผ่าน'
                                }
                            }
                        }
                    }
                })//bootstrapValidator
                .on('success.form.bv', function (e) {
                    // Prevent form submission
                    e.preventDefault();

                    // Get the form instance
                    var $form = $(e.target);
                    // Get the BootstrapValidator instance
                    var bv = $form.data('bootstrapValidator');

                    // Use Ajax to submit form data
                    if (isUpdate) {
                      updateMember($form);
                    } else {
                      goSave($form);
                    }
                });//on success.form.bv
        });//document.ready
        function updateMember($form) {
          $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'WSRestFul.asmx/UpdateMember',
                data: $form.serialize()
            })
            .done(function (data) {
                if (data.result === "success") {
                    Toast.init({
                        "selector": ".alert-success"
                    });
                    Toast.show("<strong>Update completed!!!</strong>");
                } else {
                    Toast.init({
                        "selector": ".alert-danger"
                    });
                    Toast.show("<strong>Error on saving!!!<strong> " + data);
                }
            })//done
            .fail(function () {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });
            });//fail
        }

        function goSave($form) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'WSRestFul.asmx/SaveNewMember',
                data: $form.serialize()
            })
            .done(function (data) {
                if (data.result === "success") {
                    Toast.init({
                        "selector": ".alert-success"
                    });
                    Toast.show("<strong>Save completed!!!</strong> redirecting ...<br/>Please <strong>sign in</strong> with your email");
                    setTimeout(function () { window.location = "home.aspx" }, 3000);
                } else {
                    Toast.init({
                        "selector": ".alert-danger"
                    });
                    Toast.show("<strong>Error on saving!!!<strong> " + data);
                }
            })//done
            .fail(function () {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });
            });//fail
        }//goSave
    </script>
    
</body>
</html>
